<template>
	<div class="data-import el-button">
		<div @click.stop.prevent="openDialog">
			<slot>
				<el-button icon="el-icon-upload2" type="primary" :size="btnSize">导入</el-button>
			</slot>
		</div>

		<el-dialog
			append-to-body
			modal-append-to-body
			:visible.sync="visible"
			title="数据导入"
			width="500px"
			custom-class="auto-import-dialog"
			:before-close="beforeClose"
		>
			<div class="tip">
				为了确保数据的准确，请按照以下规则进行导入
				<a href="https://doc.icuapi.com/" target="doc">了解更多</a>
			</div>
			<div class="body">
				<div class="title">
					<span class="number">1</span>
					下载表单模板
				</div>
				<div class="content">
					<div class="item">· 按照规范示例.xlsx在模板内录入数据;</div>
					<div class="item">· 只导入第一张工作表(sheet1);</div>
					<div class="item">· 请勿修改表格标题，防止导入失败。</div>
				</div>
				<el-button class="el-button" @click="toDownloadTemplate">下载表单模板</el-button>
			</div>
			<div class="body">
				<div class="title">
					<span class="number">2</span>
					上传文件
				</div>
				<div class="content">
					<div class="item">· 请上传*.xls，.xlsx格式文件;</div>
					<div class="item" v-for="(item, index) in tipMessage" :key="index">· {{ item }}</div>
				</div>
				<el-button class="el-button" type="primary" :loading="loading">
					上传文件
					<input type="file" class="upload" ref="uploadFileRef" @change="toUploadFile" />
				</el-button>
			</div>

			<template #footer>
				<div class="footer">
					<el-button class="cancel-btn" type="info" :loading="loading" @click="cancel">取消</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script>
/**
 * props:
 *  downloadUrl: 下载模板的url
 *  btnSize: 按钮的大小
 * emits:
 *  upload: (file: File, down: () => void) => void
 */
export default {
	name: "data-import",
	props: {
		downloadUrl: {
			type: String,
			default: "",
		},
		btnSize: {
			type: String,
			default: "medium",
		},
		message: {
			type: [String, Array],
			default: "当前版本最多只允许上传5000条数据且文件大小不超过1M;",
		},
	},
	data() {
		return {
			visible: false,
			loading: false,
		}
	},
	computed: {
		tipMessage() {
			if (typeof this.message === "string") {
				return [this.message]
			}
			return this.message
		},
	},
	methods: {
		openDialog() {
			this.visible = true
		},
		toDownloadTemplate() {
			const link = document.createElement("a")
			link.href = this.downloadUrl
			link.setAttribute("download", "模板")
			link.target = "_blank"
			link.click()
		},
		toUploadFile(event) {
			const [file] = event.target.files
			this.$refs.uploadFileRef.value = null
			if (!file) return
			this.loading = true
			this.$emit("upload", {
				file,
				success: () => {
					this.loading = false
					this.cancel()
				},
			})
		},
		cancel() {
			if (!this.loading) {
				this.visible = false
			}
		},
		beforeClose(down) {
			if (!this.loading) {
				down()
			}
		},
	},
	components: {},
}
</script>

<style lang="scss" scoped>
.data-import {
	display: inline-block;
	padding: 0;
	border: 0;
}
.tip {
	background: #f4f5f5;
	color: #90959b;
	box-sizing: border-box;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 7px;
	padding-bottom: 7px;
	a {
		color: #0d6efd;
		&:hover {
			text-decoration: underline;
		}
	}
}
.body {
	padding: 0 30px;
	box-sizing: border-box;
	.title {
		line-height: 50px;
		font-size: 16px;
		font-weight: 700;
		span {
			font-weight: 500;
			display: inline-block;
			width: 18px;
			height: 18px;
			border-radius: 50%;
			color: #fff;
			background: #0d6efd;
			text-align: center;
			line-height: 18px;
			font-size: 14px;
		}
	}
	.content {
		background: #f4f5f5;
		color: #8d9299;
		box-sizing: border-box;
		padding: 10px 15px;
		margin-bottom: 15px;
		line-height: 1.8;
	}
	.el-button {
		display: block;
		margin: auto;
		width: 170px;
		position: relative;
		.upload {
			position: absolute;
			z-index: 5;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			opacity: 0;
			cursor: pointer;
		}
	}
}
.footer {
	padding-top: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	.cancel-btn {
		background: #f0f0f0;
		border: 1px solid #f0f0f0;
		color: #666;
	}
}
</style>

<style lang="scss">
.auto-import-dialog {
	.el-dialog__body {
		padding: 0;
	}
}
</style>
